// 1 发送请求获取数据 渲染页面 - art-template


// 2 给新增窗口的保存按钮绑定点击事件
$(function () {
    // 全局变量 被编辑的数据的id
    let id;

    function getCategoryList() {
        $.get("/admin/category/list", function (res) {
            const html = template("trTpl", { list: res.data });
            $(".category_table tbody").html(html)
        })
    }
    // 1 发送请求 获取所有的分类数据
    getCategoryList()
    // 2 给新增-窗口 保存 按钮 绑定点击事件
    $("#myModal .btn_opt").click(function () {
        // 2.1 获取 表单中的值(属性选择器)
        const name = $("input[name='name']").val().trim();
        const slug = $("input[name='slug']").val().trim();

        // 2.2判断表单字段是否为空
        if (!name || !slug) {
            layer.alert("不能为空");
            return
        }
        // 2.3 发送请求 完成新增
        $.post("/admin/category/add", { name, slug }, function (res) {
            // 2.4 关闭模态框 bootstrap 里面的 模态框关闭
            $("#myModal").modal('hide')
            // 2.5清空新增表单中的值
            $("input[name='name']").val("")
            $("input[name='slug']").val("")
            // 2.6 刷新页面数据
            getCategoryList()
        })
    })
    // 3 编辑按钮(动态生成！！！  事件委托)
    $(".category_table").on("click", ".edit", function () {
        //3.1 获取被点击的数据
        const obj = $(this).parents("tr").data("obj");
        //3.2渲染到编辑模态框中

        $("#name").val(obj.name)
        $("#slug").val(obj.slug)
        id = obj.id
    })

    // 编辑 保存按钮
    $("#editModal .ban_opt").click(function () {
        //4.1获取被编辑的数据
        const name = $("#name").val().trim()
        const slug = $("#slug").val().trim()
        id = id
        // 4.2 发送post请求到后台 完成更新
        $.post("/admin/category/edit", { id, name, slug }, function (res) {
            // 成功之后，关闭模态框
            $("#editModal").modal("hide");

            //刷新数据
            getCategoryList()
        })

    })
    // 5删除按钮
    $(".category_table").on("click", ".delete", function () {


        layer.confirm("您舍得嘛？", (index) => {
            // this 的指向
            const { id } = $(this).parents("tr").data("obj");
            $.post("/admin/category/delete", { id }, function (res) {
                // 刷新数据
                getCategoryList()
                layer.close(index)
            })
        })
    })
})